<template>
	<div>
		<!--未加载内容-->
		<!-- <div v-if="ToLoad">
        <a-spin tip="数据加载中，请稍等...">
          <div class="spin-content">
          </div>
        </a-spin>
      </div> -->
		<div v-if="mpNotAuditUserNum > 0" class="m-b-30 box-shadow" style="">
			<a-alert :message="'有'+mpNotAuditUserNum+'位用户申请创作者，请前往用户中心审核！'" banner />
		</div>
		
		<div class="pageOut">
			<div class="HomePage" v-for="(item, index) in dataList">
				<div class="heatIcon" :style="{ backgroundColor: colorData[index % 10] }">
					<BarChartOutlined class="ppp" />
				</div>
				<div class="heatText">
					<div>{{ item.name }}</div>
					<div>{{ item.value }}</div>
				</div>
			</div>
			<!--数据图-->
			<div style="min-width: 100%; height: 400px; margin-top: 30px; border-top: 3px solid #778899; padding-top: 20px" id="main"></div>
		</div>
	</div>
</template>

<script>
import commonApi from '../../api/common.js';

import * as echarts from 'echarts';
import { ref, onUnmounted } from 'vue';
export default {
	name: 'echarts',
	component() {
		DeploymentUnitOutlined, BarChartOutlined;
	},
	data() {
		return {
			colorData: ['#FF9933', '#FF6699', '#673ab7', '#CC99FF', '#CC33FF', '#9966FF', '#6699FF', '#3333FF', '#CC3399', '#999999'],
			dataList: [],
			/*数据图*/
			tongjiData: {
				title: {
					text: '每月用户数据'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: []
					/*['每天用户增长数', '每天用户登录数', '每天抢单用户数']*/
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: []
				},
				yAxis: {
					type: 'value'
				},
				series: []
			},
			mpNotAuditUserNum: 0
		}
	},
	mounted() {
		if (location.href.indexOf('#reloaded') == -1) {
			location.href = location.href + '#reloaded';
			location.reload();
		}
		this.shouyeDataList();
	},
	/* beforeRouteLeave(to, from, next){
          next();
      },*/
	methods: {
		shouyeDataList() {
			commonApi.getIndexData().then((res) => {
				if (this.dataList !== []) {
					this.ToLoad = false;
				}
				this.dataList = res.result.module;
				this.tongjiData.legend.data = res.result.tongji.field;
				this.tongjiData.xAxis.data = res.result.tongji.dates;
				this.tongjiData.series = res.result.tongji.data;
				this.tongjiData.title.text = res.result.tongji.title;
				this.mpNotAuditUserNum = res.result.mpNotAuditUserNum
				this.echartsInit();
			});
		},
		/* */
		echartsInit() {
			//使用时只需要把setOption里的对象换成echarts中的options或者自己的参数即可
			let newPromise = new Promise((resolve) => {
				resolve();
			});
			//然后异步执行echarts的初始化函数
			newPromise.then(() => {
				echarts.init(document.getElementById('main')).setOption(this.tongjiData);
			});
		}
	}
};
</script>

<style scoped>
.pageOut {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	padding: 10px;
	border: 1px solid #fbfbfb;
}
.HomePage {
	width: 200px;
	height: 70px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	margin-right: 45px;
	margin-bottom: 15px;
}
.HomePage:hover {
	/*
        background-color: #6C9FC1;*/
	cursor: pointer;
	box-shadow: 1px 1px 5px #888888;
}
.heatIcon {
	width: 40%;
	text-align: center;
	line-height: 70px;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
}
.heatText {
	align-items: center;
	width: 60%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}
.heatText div:nth-child(1) {
	font-size: 15px;
}

.ppp {
	font-size: 18px;
	color: #ffffff;
}
</style>
